<template>
  <div style="padding: 50px 0px;">
    <Table stripe border highlight-row height="300" :columns="columns1" :data="data1"></Table>
    <br/>
    <Table width="550" border :columns="columns2" :data="data3"></Table>
    <br/>
    <Table :columns="columns10" :data="data9"></Table>
    <br/>
    <Table :columns="columns11" :data="data10" border height="500"></Table>
    <br/>
    Change Loading Status <i-switch v-model="loading"></i-switch>
    <Table :loading="loading" :columns="columns1" :data="data1"></Table>
    <br>
    <Page :total="100" show-sizer show-elevator show-total/>
    <br/>
    <Page :total="40" size="small" />
    <br/>
    <Page :total="40" size="small" show-elevator show-sizer />
    <br/>
    <Page :total="40" size="small" show-total />
    <br/>
    <Page :current="2" :total="50" simple />
    <br/>
    <Page :total="100" prev-text="Previous" next-text="Next" />
  </div>
</template>

<script>
  import expandRow from '@/components/table-expand.vue';
  export default {
    name: "iview_table",
    components: {
      // eslint-disable-next-line vue/no-unused-components
      expandRow
    },
    data () {
      return {
        loading: true,
        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age',
            sortable: true,
            filters: [
              {
                label: 'Greater than 25',
                value: 1
              },
              {
                label: 'Less than 25',
                value: 2
              }
            ],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === 1) {
                return row.age > 25;
              } else if (value === 2) {
                return row.age < 25;
              }
            }
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data1: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          },
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            date: '2016-10-03'
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            date: '2016-10-01'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            date: '2016-10-02'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            date: '2016-10-04'
          }
        ],
        columns2: [
          {
            title: 'Name',
            key: 'name',
            width: 100,
            fixed: 'left'
          },
          {
            title: 'Age',
            key: 'age',
            width: 100
          },
          {
            title: 'Province',
            key: 'province',
            width: 100
          },
          {
            title: 'City',
            key: 'city',
            width: 100
          },
          {
            title: 'Address',
            key: 'address',
            width: 200
          },
          {
            title: 'Postcode',
            key: 'zip',
            width: 100
          },
          {
            title: 'Action',
            key: 'action',
            fixed: 'right',
            width: 120,
            render: (h) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  }
                }, 'View'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  }
                }, 'Edit')
              ]);
            }
          }
        ],
        data3: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            province: 'America',
            city: 'New York',
            zip: 100000
          },
          {
            name: 'Jim Green',
            age: 24,
            address: 'Washington, D.C. No. 1 Lake Park',
            province: 'America',
            city: 'Washington, D.C.',
            zip: 100000
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            province: 'Australian',
            city: 'Sydney',
            zip: 100000
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            province: 'Canada',
            city: 'Ottawa',
            zip: 100000
          }
        ],
        columns10: [
          {
            type: 'expand',
            width: 50,
            render: (h, params) => {
              return h(expandRow, {
                props: {
                  row: params.row
                }
              })
            }
          },
          {
            title: 'Name',
            key: 'name'
          },
          {
            title: 'Age',
            key: 'age'
          },
          {
            title: 'Address',
            key: 'address'
          }
        ],
        data9: [
          {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            job: 'Data engineer',
            interest: 'badminton',
            birthday: '1991-05-14',
            book: 'Steve Jobs',
            movie: 'The Prestige',
            music: 'I Cry'
          },
          {
            name: 'Jim Green',
            age: 25,
            address: 'London No. 1 Lake Park',
            job: 'Data Scientist',
            interest: 'volleyball',
            birthday: '1989-03-18',
            book: 'My Struggle',
            movie: 'Roman Holiday',
            music: 'My Heart Will Go On'
          },
          {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            job: 'Data Product Manager',
            interest: 'tennis',
            birthday: '1992-01-31',
            book: 'Win',
            movie: 'Jobs',
            music: 'Don’t Cry'
          },
          {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            job: 'Data Analyst',
            interest: 'snooker',
            birthday: '1988-7-25',
            book: 'A Dream in Red Mansions',
            movie: 'A Chinese Ghost Story',
            music: 'actor'
          }
        ],
        columns11: [
          {
            title: 'Name',
            key: 'name',
            align: 'center',
            width: 200,
            fixed: 'left',
            filters: [
              {
                label: 'Joe',
                value: 1
              },
              {
                label: 'John',
                value: 2
              }
            ],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === 1) {
                return row.name === 'Joe';
              } else if (value === 2) {
                return row.name === 'John Brown';
              }
            }
          },
          {
            title: 'Other',
            align: 'center',
            children: [
              {
                title: 'Age',
                key: 'age',
                align: 'center',
                width: 200,
                sortable: true
              },
              {
                title: 'Address',
                align: 'center',
                children: [
                  {
                    title: 'Street',
                    key: 'street',
                    align: 'center',
                    width: 200
                  },
                  {
                    title: 'Block',
                    align: 'center',
                    children: [
                      {
                        title: 'Building',
                        key: 'building',
                        align: 'center',
                        width: 200,
                        sortable: true
                      },
                      {
                        title: 'Door No.',
                        key: 'door',
                        align: 'center',
                        width: 200
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            title: 'Company',
            align: 'center',
            children: [
              {
                title: 'Company Address',
                key: 'caddress',
                align: 'center',
                width: 200
              },
              {
                title: 'Company Name',
                key: 'cname',
                align: 'center',
                width: 200
              }
            ]
          },
          {
            title: 'Gender',
            key: 'gender',
            align: 'center',
            width: 200,
            fixed: 'right'
          }
        ],
        data10: []
      }
    },
    mounted() {
    
    },
    methods: {
      
    },
    computed: {
      
    },
    watch: {
      
    }
  }
</script>

<style scoped>

</style>